<template>
	<div class="swiper-container" v-if="thisContent && thisContent.length > 0">
		<div class="swiper-wrapper">

			<div class="swiper-slide swiper-slide1" v-for="(item,index) in thisContent" :key="index"
				style="position: relative;">
				<el-image style="width: 100%;height: 100%;" :src="fileViewUrl+item.imgSrc" fit="contain"></el-image>

				<div style="position: absolute;bottom: 0;left: 0;width: 100%;background: #0D7FD7;color: #fff;padding: 20px;"
					class="displayFlex">
					<div style="width: 170px;font-size: 18px;text-align: center;">暂未开通此功能</div>
					<div style="width: calc(100% - 190px);position: relative;" class="displayFlexBet">
						<div>{{item.description}}</div>

						<el-popover placement="top-start" width="200" trigger="hover">

							<div>
								<div style="margin-bottom: 10px;">联系我们</div>
								<div>王经理: <span style="color:#0D7FD7">180-2175-7177</span></div>
							</div>

							<div style="text-align: center;cursor: pointer;" slot="reference">
								<img src="@/assets/sIcon51.png" style="width: 20px;height: 20px;" />
								<div style="font-size: 10px;color: #fff;margin-top: 3px;">联系我们</div>
							</div>
						</el-popover>



						<img src="@/assets/sIcon52.png" style="width: 10px;height: 10px;position: absolute;top:-22px;left:-10px" />
					</div>
				</div>
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
		<!-- 如果需要导航按钮 -->
		<!-- <div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div> -->
	</div>
</template>

<script>
	let that
	import Swiper from 'swiper'; // 注意引入的是Swiper
	import 'swiper/css/swiper.min.css' // 注意这里的引入

	export default {
		name: 'demonstrate',
		props: {
			content: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				// swiper实例  实例上有各种方法
				swiperInstance: null,
				thisContent: [],
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
			}
		},

		mounted() {
			that = this

			setTimeout(function() {
				var swiperInstance = new Swiper('.swiper-container', {
					loop: true, // 无缝
					autoplay: { //自动开始
						delay: 2000, //时间间隔
						disableOnInteraction: false, //*手动操作轮播图后不会暂停*
					},
					paginationClickable: true,
					// navigation: {
					// 	nextEl: '.swiper-button-next',
					// 	prevEl: '.swiper-button-prev',
					// },
					// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
					observer: true,
					observeParents: true,
					lazy: {
						loadPrevNext: true,
					},
					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
						clickable: true, // 分页器可以点击
					},
				})
			}, 500)
		},

		watch: {
			$route: {
				handler(to) {
					let that = this
					that.thisContent = []
					that.ajax({
						url: '/bbepMenu/validateAuthority',
						data: {
							url: to.path
						},
						success: function(data) {
							if (data.data.code == "FAIL") {
								//console.log(data.data.list)
								that.thisContent = data.data.list
							}
						}
					});
				},
				deep: true,
				immediate: true,
			}
		},

		methods: {
			show() {

			},
		}
	}
</script>
<style scoped>
	.swiper {
		--swiper-theme-color: #ff6600;
		/* 设置Swiper风格 */
		--swiper-preloader-color: #00ff33;
		/* 单独设置预加载圆圈的颜色 */
	}
</style>